<!DOCTYPE html>
<html>
	<head>
		<title>经纬度坐标系图层 构建SuperMap iServer服务地图</title>
		<!--引用需要的脚本 注意：SuperMap.Include.js内部已经动态引用相关JS，CSS文件-->
		<script src="./libs/SuperMap.Include.js"></script>

	</head>
	<body onload="init()">
		<!--地图显示的div-->
		<div id="map" style="position: absolute; left: 0px; right: 0px; width: auto; height: 98%;"></div>
		
	</body>
</html>
<script>
	//声明全局变量 map、layer、url
	var map, layer, url = "http://172.16.51.236:8090/iserver/services/map-tianditu2/rest/maps/矢量底图_经纬度";
	var urltwo = "http://172.16.51.236:8090/iserver/services/map-tianditu2/rest/maps/矢量中文注记_经纬度";
	var url2 = "http://support.supermap.com.cn:8090/iserver/services/data-DynamicData/rest/data";
	var vectors; //声明图层()1111
	var markers; //声明图层()1111
	var markerone; //声明图层()1111
	var vectorInfoWin; //声明矢量点击弹窗
	var markerInfoWin; //声明标记点击弹窗
	var animatorVector;
	var style = //声明样式
		{
			externalGraphic: "./theme/images/cluster1.png",
			fillColor: "#339933",
			fillOpacity: 1,
			strokeOpacity: 0,
			pointRadius: 12
		};
	var styleq = //声明样式
		{
			externalGraphic: "./theme/images/cluster2.png",
			fillColor: "#339933",
			fillOpacity: 1,
			strokeOpacity: 0,
			pointRadius: 12
		};

	function init() {

		//1.在指定DOM元素上初始化地图对象。
		map = new SuperMap.Map("map", {
			allOverlays: true
		});
		//2.添加控件。
		map.addControl(new SuperMap.Control.ScaleLine()); //地图比例尺控件
		map.addControl(new SuperMap.Control.LayerSwitcher()); //图层控制显示控件
		map.addControl(new SuperMap.Control.MousePosition()); //经纬度实时显示控件
		//2.初始化图层。
		//创建分块动态REST图层，该图层显示iserver 8C 服务发布的地图,
		//其中"想要"为图层名称，url图层的服务地址，{transparent: true}设置到url的可选参数
		layer = new SuperMap.Layer.TiledDynamicRESTLayer("矢量底图_经纬度", url, null, {
			maxResolution: "auto"
		});
		//其中"想要"为图层名称，url图层的服务地址，{transparent: true}设置到url的可选参数
		urltwo = new SuperMap.Layer.TiledDynamicRESTLayer("矢量中文注记_经纬度", urltwo, null, {
			maxResolution: "auto"
		});
		//构建 矢量类覆盖物 图层。()2222222
		vectors = new SuperMap.Layer.Vector("Vectors");
		//构建 标记类覆盖物 图层。()222222
		markers = new SuperMap.Layer.Markers("Markers");
		//构建 标记类覆盖物 图层。()222222
		markerone = new SuperMap.Layer.Markers("Markerone");
		//构建 矢量类覆盖物 图层。()2222222
		//初始化动画矢量图层
		animatorVector = new SuperMap.Layer.AnimatorVector("Train", {
			rendererType: "TadpolePoint"
		}, {
			//设置速度为每帧播放0.02小时的数据
			speed: 0.009,
			//开始时间为0晨
			startTime: 0,
			//结束时间设置为最后运行结束的火车结束时间
			endTime: 39
		});
		//创建一个移动矢量选择要素的控件，在指定图层上单击鼠标选择矢量要素。
						var selectFeature = new SuperMap.Control.SelectFeature(animatorVector, {
							onSelect: onFeatureSelected
						});
						map.addControl(selectFeature);
						//激活控件。
						selectFeature.activate();
		//监听图层信息加载完成事件，异步加载图层。
		layer.events.on({
			"layerInitialized": addLayer
		});
		//	vctor(); //执行添加矢量图层
		//	car(); //执行添加标记图层1
		//	go(); //执行添加标记图层2
	}

	function addLayer() {
		//将Layer图层加载到Map对象上。3333333333
		map.addLayers([layer, urltwo, vectors, markers, markerone, animatorVector]);
		//出图，设置中心点，指定放缩级别。//设置中心点，指定放缩级别。114.06932,33.60236
		map.setCenter(new SuperMap.LonLat(00, 00), 0);
		startAnimator() //调用动画效果
		//addPoint(); //
		test();


//  var lonlat = chicken.lonlat;
// var popup = new SuperMap.Popup("chicken",
// 				 new SuperMap.LonLat(),
// 				new SuperMap.Size(120, 60),
// 				"example popup",
// 				true);
// 			popup.closeOnMove = true;
// 			console.log(new SuperMap.LonLat());
// 			map.addPopup(popup);



	}

	function test() {

		var getFeatureParam, getFeatureBySQLService, getFeatureBySQLParams;
		getFeatureParam = new SuperMap.REST.FilterParameter({
			name: "Train@DynamicData",
			attributeFilter: "SmID < 2240"
		});
		getFeatureBySQLParams = new SuperMap.REST.GetFeaturesBySQLParameters({
			queryParameter: getFeatureParam,
			datasetNames: ["DynamicData:Train"]
		});
		//返回个数
		getFeatureBySQLParams.toIndex = 40;//取用40个数据
		getFeatureBySQLService = new SuperMap.REST.GetFeaturesBySQLService(url2, {
			eventListeners: {
				"processCompleted": addPoint,
				"processFailed": processFailed
			}
		});

		getFeatureBySQLService.processAsync(getFeatureBySQLParams);

	}

	//移动矢量类覆盖物
	//移动船舶矢量图层
	function addPoint(getFeaturesEventArgs) {

		var features; //x，y数据集
		result = getFeaturesEventArgs.result;
		if (result && result.features) {
			features = result.features;
		}
		console.log(features);

		//使用数据
		var pointFeatures = [];
		// var lines1 = [];
		//  var lines2 = [];
		var points = [];
		var id = 0;
		for (var i = 0, len = features.length; i < len; i++) {
			// var point = features[i].geometry;//接口集合数据
			var xxx = Math.random() * 113.06932; //替代数据
			var yyy = Math.random() * 32.60236; //替代数据
			var point = new SuperMap.Geometry.Point(xxx, yyy); //替代数据
			var po = features[i].geometry;
			if (id == features[i].data.FEATUREID) {
				points.push(po);
			} else {
				id = features[i].data.FEATUREID;
				points = [];
			}

			if (features[i].data.FEATUREID < 151) {
				var pointFeature = new SuperMap.Feature.Vector(point, {
					FEATUREID: features[i].data.FEATUREID,
					TIME: features[i].data.TIME
				}, style);
			} else {
				var pointFeature = new SuperMap.Feature.Vector(point, {
					FEATUREID: features[i].data.FEATUREID,
					TIME: features[i].data.TIME
				}, styleq);
			}

			pointFeatures.push(pointFeature);
		}

		animatorVector.addFeatures(pointFeatures);
	}

	function processFailed(e) {
		widgets.alert.showAlert(e.error.errorMsg, false);
	}
	//开始动画效果
	function startAnimator() {
		animatorVector.animator.start();
	}
	var xx = 114.06932;
	var yy = 33.60236;

	//矢量要素点击事件
	// 			// 点击矢量要素覆盖物，触发调用此函数。
				function onFeatureSelected(feature) {
					closeVectorInfoWin();
					console.log(feature)
					var id = feature.attributes.FEATUREID;
				//	console.log(feature.attributes.FEATUREID)	
		            console.log(feature.geometry)
				//	var lonLat = map.getCenter();     marker.getLonLat(),
				//	var lonlatx = feature.geometry.x;
				//	var lonlaty = feature.geometry.y;
				
// 				var textHTML = "<div style='width:200px'>";
// 				textHTML += '<img src="./theme/images/jux.png" alt="">';
// 				textHTML += '<p>仓库：<span>2号仓库</span></p>';
// 				textHTML += '<p>可用库存量：<span>1000</span></p>';
// 				textHTML += '<p>仓库负责人：<span>李某某</span></p>';
// 				textHTML += "</div>";
					//创建一个具有指向和边框的浮动弹窗
					var popup = new SuperMap.Popup.FramedCloud(
						id, //唯一标识
						new SuperMap.LonLat(), //标记覆盖物的坐标,地图上弹窗显示的位置。
						new SuperMap.Size(420,220),
						"fdf", //弹窗内容HTML的字符串表达
						null,
						true); //是否显示关闭按钮。
					vectorInfoWin = popup;
					//在地图中添加弹出窗口
					map.addPopup(popup);
				};
	//销毁 Popup.FramedCloud 弹窗。
	function closeVectorInfoWin() {
		if (vectorInfoWin) {
			vectorInfoWin.hide();
			vectorInfoWin.destroy();
		}
	}
</script>
